<script setup lang="js">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const echartBar = ref();
const chartOptions = ref({
    xAxis: [],
    legend: [],
    series: []
});

// 创建城市名称映射对象
const cityMapping = {
    chongqing: '重庆',
    beijing: '北京',
    guangdong: '广东',
    shanghai: '上海',
    zhejiang: '浙江',
    anhui: '安徽',
    tianjin: '天津',
    sichuan: '四川',
    shandong: '山东',
    jiangsu: '江苏',
};

// 数据处理方法
function processData(rawData) {
    const times = rawData.map(item => item.times); // 时间轴
    const cities = Object.keys(rawData[0]).filter(key => key !== 'times'); // 城市
    const seriesList = cities.map(city => ({
        type: 'line',
        name: cityMapping[city] || city, // 使用映射的城市名称
        data: rawData.map(item => item[city]),
        smooth: true,
        showSymbol: false,
        emphasis: {
            focus: 'series'
        }
    }));

    const legend = cities.map(city => cityMapping[city] || city);

    return {
        xAxis: times,
        legend: legend,
        series: seriesList
    };
}

// 获取数据并初始化图表
function getData() {
    axios.get('/api/queryAllCities')
        .then(response => {
            console.log('原数据：', response.data.data);
            const processedData = processData(response.data.data);
            chartOptions.value = processedData;
            chartBartInit();
        })
        .catch(error => {
            console.error('获取数据失败:', error);
        });
}

// 初始化图表
function chartBartInit() {
    if (!chartOptions.value.xAxis.length || !chartOptions.value.series.length) {
        console.warn('数据为空，无法初始化图表');
        return;
    }

    const myChart = echarts.init(echartBar.value, 'light', {
        width: 500,
        height: 500
    });

    const option = {
        animationDuration: 1000,
        title: {
            text: '2016-2022年各城市充电桩数量变化',
            textStyle: {
                color: '#fff',
            },
            top: '5%',
            left: 'center',
        },
        tooltip: {
            trigger: 'axis',
            formatter: (params) => {
                let tooltipText = `<strong>${params[0].axisValue}</strong><br>`;
                params.forEach(item => {
                    tooltipText += `${item.marker} ${item.seriesName}: ${item.data}<br>`;
                });
                return tooltipText;
            }
        },
        legend: {
            data: chartOptions.value.legend,
            textStyle: {
                color: '#fff',
            },
            top: '13%',
            left: '10%',
        },
        xAxis: {
            type: 'category',
            data: chartOptions.value.xAxis,
            axisLine: {
                lineStyle: {
                    color: '#fff',
                }
            },
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff',
                }
            },
            axisLabel: {
                color: '#fff'
            }
        },
        grid: {
            top: '25%',
            left: '13%',
            right: '10%',
            bottom: '5%',
        },
        series: chartOptions.value.series
    };

    myChart.setOption(option);
}

onMounted(() => {
    getData();
});
</script>

<template>
    <div ref="echartBar" style="width: 100%; height: 520px;"></div>
</template>

<style scoped>
</style>
